<template>
  <div class="wrap">
    <div class="msg">店铺后台登录</div>
    <div class="regist">
      <div class="tishi_msg">没有账号?</div>
      <div class="link_regist"><router-link to="/regist" class="reg">立即注册</router-link></div>
    </div>
    <div class="container">
      <el-form :label-position="labelPosition" label-width="80px" :rules="rules" :model="formLabelAlign">
        <el-form-item label="账号" prop="username">
          <el-input v-model="formLabelAlign.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="formLabelAlign.password"></el-input>
        </el-form-item>
        <el-row class="btn">
          <el-button type="primary" round @click="sub">登录</el-button>
        </el-row>
        <div class="account_msg" v-show="somedo==true">账号或密码错误</div>
        <div class="account_msg" v-show="noparams==true">请填写账号或密码</div>
      </el-form>
    </div>
  </div>
</template>

<script>
// import * as axios from 'axios'
import {post} from '../assets/http.js'

export default {
  name: 'Login',
  data () {
    return {
      labelPosition: 'right',
      formLabelAlign: {
        username: '',
        password: ''
      },
      somedo: false,
      noparams: false,
      rules: {
        username: [
          {required: true, message: '账号为空', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '密码不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  mounted () {
    // axios
    //   .get('https://api.coindesk.com/v1/bpi/currentprice.json')
    //   .then(response => (this.info = response))
  },
  methods: {
    sub () {
      var username = this.formLabelAlign.username
      var password = this.formLabelAlign.password
      // alert(this.formLabelAlign.username.length)
      if (username.length < 1 || password.length < 1) {
        this.noparams = true
        return
      }
      post('store/login', {'username': username, 'password': password}).then(res => {
        if (res.flag) {
          // 请求成功 跳转到首页
          this.$router.push({path: '/menu', query: { store_id: res.store_id }})
        } else {
          // 请求失败  提示错误信息
          this.somedo = true
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .wrap {
    border: 5px solid gray;
    border-style: double;
    width: 50%;
    height: 600px;
    margin-left: 25%;
    /* margin-top: 10%; */
  }

  .container {
    width: 50%;
    margin-left: 26%;
    margin-top: 10%;
    display: flex;
    /* border: 1px solid #000;
    height: 100%;
    width: 100%; */
  }

  .msg {
    margin-top: 10%;
    color: yellowgreen;
    font-size: 25px;
    text-align: center;
  }

  .btn {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .account_msg {
    color: red;
    text-align: center;
    margin-top: 15px;
    font-size: 20px;
    border: 3px solid rgb(150, 12, 97);
    border-style: double;
    width: 170px;
    height: 35px;
    margin-left: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .somedo {
    display: none;
  }
  .regist {
    color: rgb(211, 211, 44);
    margin-left: 600px;
  }
  .reg{
    padding-top: 50px;
    margin-left: 15px;
  }
.router-link-active{
  color: #ffd04b;
  text-decoration: none;
}
a {
    text-decoration: none;
}
</style>
